import React from 'react';
import {Marker} from 'react-bmap';
import BMap from 'BMap';
import red_marker from '../../assets/red_marker.png';
import device_0 from '../../assets/device_0.png';
import device_1 from '../../assets/device_1.png';
import device_2 from '../../assets/device_2.png';

const statusMap = [device_0, device_1, device_2];

//这是个箭头函数  ，参数为{position。。。}
const CustomMark = (
    {
                        position = {
                            lng: 116.402544,
                            lat: 39.928216
                        },
                        width = 21,
                        height = 33,
                        background = `url(${red_marker})`,
                        textAlign = 'center',
                        lineHeight = '1em',
                        color = 'white',
                        index = '',
                        status,
                        events = {
                            click() {
                            }
                        },
                        ...otherProps
    }
                    ) => {
                            if (typeof status === 'number') {
                                width = 32;
                                height = 32;
                                background = `url(${statusMap[status]})`
                            }
                            const style = {
        width: width + 'px',
        height: height + 'px',
        textAlign,
        color,
        background,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
                            const offset = new BMap.Size(-width / 2, -height);
                            return (
                                // fragment:没有意义的元素
                                <React.Fragment>
                                    <Marker position={position} offset={offset}  {...otherProps} >
                                        <div style={style} onClick={events.click}>
                                            <span>{index}</span>
                                        </div>
                                    </Marker>
                                </React.Fragment>
                            )

};

//返回一个函数：参数是标注点的信息
export default CustomMark;
